<clr-modal clrModalSize="md" [(clrModalOpen)]="addRobotOpened"
           [clrModalStaticBackdrop]="true" [clrModalClosable]="true">
    <h3 *ngIf="!isEditMode" class="modal-title">{{"SYSTEM_ROBOT.CREATE_PROJECT_ROBOT" | translate}}</h3>
    <h3 *ngIf="isEditMode" class="modal-title">{{"SYSTEM_ROBOT.EDIT_PROJECT_ROBOT" | translate}}</h3>
    <div class="modal-body">
        <inline-alert class="modal-title"></inline-alert>
        <p *ngIf="!isEditMode" class="mt-0">{{"SYSTEM_ROBOT.CREATE_PROJECT_ROBOT_SUMMARY" | translate}}</p>
        <p *ngIf="isEditMode" class="mt-0">{{"SYSTEM_ROBOT.EDIT_PROJECT_ROBOT_SUMMARY" | translate}}</p>
        <form #robotForm="ngForm" class="clr-form clr-form-horizontal mt-1">
            <section class="form-block">
                <!-- name -->
                <div class="clr-form-control">
                    <label for="name" class="clr-control-label required">{{'P2P_PROVIDER.NAME' | translate}}</label>
                    <div class="clr-control-container" [class.clr-error]="((name.dirty || name.touched) && name.invalid) || isNameExisting">
                        <div class="clr-input-wrapper">
                            <input class="clr-input"
                                   [disabled]="loading || isEditMode"
                                   type="text" id="name"
                                   [(ngModel)]="systemRobot.name"
                                   required
                                   pattern='[^" ~#$%]+'
                                   maxLengthExt="255"
                                   autocomplete="off"
                                   size="30" name="name" #name="ngModel"  (input)="inputName()">
                            <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
                            <span class="spinner spinner-inline" [hidden]="!checkNameOnGoing"></span>
                        </div>
                        <clr-control-error *ngIf="((name.dirty || name.touched) && name.invalid) || isNameExisting">
                            <span *ngIf="!((name.dirty || name.touched) && name.invalid) && isNameExisting">{{'ROBOT_ACCOUNT.ACCOUNT_EXISTING' | translate}}</span>
                            <span *ngIf="(name.dirty || name.touched) && name.invalid">{{ 'ROBOT_ACCOUNT.ROBOT_NAME' | translate }}</span>
                        </clr-control-error>
                    </div>
                </div>
                <!-- expiration -->
                <div class="clr-form-control">
                    <label class="clr-control-label required">{{"SYSTEM_ROBOT.EXPIRATION_TIME" | translate}}
                        <clr-tooltip>
                            <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
                            <clr-tooltip-content clrPosition="top-right" clrSize="lg" *clrIfOpen>
                                <span>{{"SYSTEM_ROBOT.EXPIRATION_TIME_EXPLAIN" | translate}}</span>
                            </clr-tooltip-content>
                        </clr-tooltip>
                    </label>
                    <div class="clr-control-container" [class.clr-error]="((expiration.dirty || expiration.touched) && expiration.invalid) || isExpirationInvalid()">
                        <div class="input-width flex">
                            <div class="clr-select-wrapper">
                                <select [ngModelOptions]="{standalone: true}" (change)="changeExpirationType()"  [(ngModel)]="expirationType" id="expiration-type"  class="clr-select">
                                    <option value="days">{{"SYSTEM_ROBOT.EXPIRATION_DAYS" | translate}}</option>
                                    <option value="never">{{"SYSTEM_ROBOT.EXPIRATION_NEVER" | translate}}</option>
                                </select>
                            </div>
                            <div class="clr-input-wrapper">
                                <input (input)="inputExpiration()" class="clr-input expiration-width" name="expiration" type="text"
                                       #expiration="ngModel"
                                       autocomplete="off"
                                       [(ngModel)]="systemRobot.duration" required
                                       pattern="^[\-1-9]{1}[0-9]*$" id="robotTokenExpiration" size="20"/>
                                <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
                            </div>
                        </div>
                        <clr-control-error *ngIf="((expiration.dirty || expiration.touched) && expiration.invalid)|| isExpirationInvalid()">
                            {{"SYSTEM_ROBOT.EXPIRATION_REQUIRED" | translate}}
                        </clr-control-error>
                    </div>
                </div>
                <!-- 3. description -->
                <clr-textarea-container>
                    <label>{{ 'DISTRIBUTION.DESCRIPTION' | translate }}</label>
                    <textarea class="mt-description"
                              clrTextarea
                              type="text"
                              id="description"
                              name="description"
                              [(ngModel)]="systemRobot.description"
                    ></textarea>
                </clr-textarea-container>
                <div class="clr-form-control">
                    <label class="clr-control-label mt-8px">{{"SYSTEM_ROBOT.PERMISSION_COLUMN" | translate}}</label>
                    <div class="clr-control-container">
                        <clr-dropdown class="dropdown-per" [clrCloseMenuOnItemClick]="false">
                            <button class="btn btn-link" clrDropdownTrigger>
                                {{getPermissions()}} {{"SYSTEM_ROBOT.PERMISSIONS" | translate}}
                                <clr-icon shape="caret down"></clr-icon>
                            </button>
                            <clr-dropdown-menu clrPosition="bottom-left" *clrIfOpen>
                                <div clrDropdownItem *ngFor="let item of defaultAccesses" (click)="chooseAccess(item)">
                                    <clr-icon class="check" shape="check" [style.visibility]="item.checked ? 'visible' : 'hidden'"></clr-icon>
                                    <span>{{i18nMap[item.action] | translate}} {{i18nMap[item.resource] | translate}}</span>
                                </div>
                            </clr-dropdown-menu>
                        </clr-dropdown>
                    </div>
                </div>
            </section>
        </form>
    </div>
    <div class="modal-footer">
        <span>
            <button (click)="cancel()" id="system-robot-cancel" type="button" class="btn btn-outline">{{'BUTTON.CANCEL'
                | translate}}</button>
        <button [disabled]="disabled()|| checkNameOnGoing"  [clrLoading]="saveBtnState" (click)="save()" id="system-robot-save" type="button"
                class="btn btn-primary">
            <span *ngIf="isEditMode">{{'BUTTON.SAVE'| translate}}</span>
            <span *ngIf="!isEditMode">{{'BUTTON.ADD'| translate}}</span>
            </button>
        </span>
    </div>
</clr-modal>
